<template>
	<div class="detail-wrapper">
		<div class="d-header" v-if="showHeader">
			<p class="title f30 text-black text-bold">{{ nowRowData.workflowName }}</p>
			<div class="f16 mt12">
				<span class="tag-btn">{{ nowRowData.subsidyTypeLabel }}</span>
			</div>
			<div class="flex align-center f16 text-gray text-footer">
				<span class="text-label">创建人：{{ nowRowData.createUserName }}</span>
				<span class="text-label">创建时间：{{ nowRowData.createTime }}</span>
			</div>
		</div>
		<div class="d-content">
			<div class="nav-title flex align-center" v-if="showHeader">
				<p>审批配置信息</p>
				<div class="primary-tag fc">{{ nowRowData.subsidyTypeLabel }}</div>
				<div class="primary-tag fc" v-if="!model.id">{{ nowRowData.workflowName }}</div>
			</div>

			<!-- <NavTabs :tabs="tabsList" v-model="activeIndex" @tab-change="handleTabsClick"></NavTabs> -->

			<div class="list-ul">
				<p class="text-title">适用范围</p>
				<div class="list-box flex mt10">
					<div v-for="(item, index) in activeConfig.adaptRangeJsonArray" :key="index" class="list-item">
						<span class="list-item-tag f14">{{ item.label }}</span>
					</div>
				</div>
			</div>

			<div class="config-content">
				<p class="text-title">审批流程</p>
				<FlowPath :nodeList="activeConfig.nodeList" :key="activeConfig.value" :model="model"></FlowPath>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod/index'
import NavTabs from '../NavTabs/index.vue'
import FlowPath from './FlowPath/index.vue'
const props = defineProps<{
	model: any
  approvalConfigId?:string|number
	showHeader?: boolean
}>()

const nowRowData:any = ref({})
watchEffect(()=> {
  nowRowData.value = props.model
})
const labelStr = {
	approvalHierarchy: {
		1: '所属社区',
		2: '所属街道',
		3: '所属区',
		4: '市级',
		5: '第三方',
	},
	approvalWay: {
		1: '或签（一人签署则审批通过）',
		2: '会签（全部签署则审批通过）',
	},
	rejectHierarchy: {
		0: '驳回至上级',
		1: '驳回至数据提交方',
	},
	cycle: {
		1: '月',
		2: '季度',
		3: '半年',
		4: '年',
	},
}
const configList = ref({})

const activeIndex:any = ref(0)

const tabsList:any = computed(() => {
	return Object.keys(configList.value).map((k) => {
		return {
			label: configList.value[k].label,
			value: +k,
		}
	})
})

const handleTabsClick = (item) => {
	console.log(item, activeIndex.value,activeConfig.value, 'item----')
}

const activeConfig = computed(() => {
	return (
		configList.value[activeIndex.value] || {
			adaptRangeJsonArray: [],
			nodeList: [],
		}
	)
})

const getDetail = () => {
  const randomNo = props.approvalConfigId || props.model.randomNo
  if(!randomNo) return 
	apiMod
		.view_ofsWorkflowScheme_acquire({
			randomNo:randomNo,
		})
		.then((res) => {
			const data = res.data||[]
			configList.value = {}
			tabsList.value = data.map((item, index) => {
				if (index == 0) {
					activeIndex.value = `${index}`
          props.model.cycle = item.cycle
				}
				configList.value[`${index}`] = {
					label: item.scheme,
					value: `${index}`,
					adaptRangeJsonArray: JSON.parse(item.adaptRangeJsonArray),
					nodeList: JSON.parse(item.workflowConfiguration),
				}
				return {
					label: item.scheme,
					value: `${index}`,
				}
			})
		})
}


onMounted(()=> {
  getDetail()
})
</script>

<style scoped lang="scss">
.detail-wrapper {
	.d-header {
		height: 180px;
		background: rgba(238, 242, 255, 0.5);
		border-radius: 10px 10px 0 0;
		padding: 40px;
		.tag-btn {
			height: 25px;
			border-radius: 4px;
			background: #d5e1ff;
			font-family: 'Microsoft YaHei';
			font-weight: 400;
			font-size: 16px;
			color: #3f5485;
			padding: 2px 12px;
		}
		.text-footer {
			padding: 22px 0;
			display: flex;
			gap: 60px;
		}
	}
	.d-content {
		background: #fff;
		padding: 20px;
	}
}

.text-title {
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 16px;
	line-height: 22px;
	text-align: left;
	color: #000;
}

.nav-title {
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 20px;
	text-align: left;
	color: #1c1c28;
	.primary-tag {
		margin-left: 20px;
		padding: 4px 16px;
		height: 29px;
		border-radius: 6px;
		background: #f57350;
		color: #fff;
		font-size: 16px;
	}
}

.list-ul {
	margin-top: 31px;

	.list-item {
		display: flex;
		align-items: center;
		&-tag {
			margin-right: 6px;
			font-size: 14px;
			color: #1c1c28;
			padding: 4px 16px;
			height: 27px;
			border-radius: 6px;
			background: #fff5f7;
		}
	}
}

.config-content {
	margin-top: 20px;
}
</style>
